<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<%--   试试同步，17年3月16号 9:21    --%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>家庭相册</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<link rel="stylesheet" href="css/common.css" type="text/css" media="all" />
	<link href="css/zeroModal.css" rel="stylesheet">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<link href="css/animate.min.css" rel="stylesheet">
	<link href="css/tjlxr.min.css" rel="stylesheet">

	<script src="js/jquery-1.8.2.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/content.min.js"></script>

	<script src="js/zeroModal.js"></script>
<script type="text/javascript">
function quitFun(){	
	$.ajax({
	    type:"post",
	    url:"userController/quit",      // 这里是提交到什么地方的url
	    data:{},            // 这里把表单里面的数据放在这里传到后台
	    dataType:"json",
	    success:function(date){
	    	window.location.href="login.jsp"
	    }
	   /*  error:function(){  
	    	$("#msg").html("用户名或密码错误！"); 
        }  */ 
	 });
}
	$(function() {
		//顶部导航切换
		$(".nav li a").click(function() {
			$(".nav li a.selected").removeClass("selected");
			$(this).addClass("selected");
		})
	});
	function quitFun() {
		$.ajax({
			type : "post",
			url : "userController/quit", // 这里是提交到什么地方的url
			data : {}, // 这里把表单里面的数据放在这里传到后台
			dataType : "json",
			success : function(date) {
				window.location.href = "login.jsp"
			}
		/*  error:function(){  
		 	$("#msg").html("用户名或密码错误！"); 
		 }  */
		});
	}
	function createPhoto() {

		var name = $("input[id='ipt']").val();
		var now = $("#create").html();
		if (name) { //如果返回的有内容 
			$.ajax({
			    type:"post",
			    url:"photoController/add",      // 这里是提交到什么地方的url
			    data:{name : name , userId:"${user.id}"},            // 这里把表单里面的数据放在这里传到后台
			    dataType:"json",
			    success:function(date){
			    	if(date=="0"){
			    		$("#msg").html("相册已存在！");
			    	}else{
			    		$('#dialogBg').fadeOut(300, function() {
							$('#dialog').addClass('bounceOutUp').fadeOut();
						});
						window.location.reload();
			    	}
			    },
			   /*  error:function(){  
			    	$("#msg").html("用户名或密码错误！"); 
	            }  */ 
			});

		}
	}
	var w, h, className;
	function getSrceenWH() {
		w = $(window).width();
		h = $(window).height();
		$('#dialogBg').width(w).height(h);
	}

	window.onresize = function() {
		getSrceenWH();
	};
	$(window).resize();

	$(function() {
		getSrceenWH();

		//显示弹框
		$('#creatrNew').click(
				function() {
					className = $(this).attr('class');
					$('#dialogBg').fadeIn(300);
					$('#dialog').removeAttr('class').addClass(
							'animated ' + className + '').fadeIn();
				});

		//关闭弹窗
		$('.claseDialogBtn').click(function() {
			$('#dialogBg').fadeOut(300, function() {
				$('#dialog').addClass('bounceOutUp').fadeOut();
			});
		});
	});
	function editAlphoto(id) {
	    var a = '#save'+id;
	    var b = '#name'+id;
        if($(a).is(':hidden')){
            $(a).show();
            $(b).attr('contentEditable',true);
            document.getElementById('name'+id).style.color='blue';
          //  $(b).focus();
            var t=$(b).html();
            $(b).html(t).focus();
        }else{
            $(a).hide();
            $(b).blur();
            document.getElementById('name'+id).style.color='';
            $(b).attr('contentEditable',false);
        }
    }
    function saveName(id) {
        var spanId = '#name'+id;
        var name =$(spanId).text();
        if(name==''){
	        /*alert('相册名不能为空，请重新编辑！')*/
            zeroModal.error('相册名不能为空，请重新编辑！');
            setTimeout(function () {
                window.location.reload();
            },1000)
		}else{
            $.ajax({
                type:"post",
                url:"photoController/saveName",      // 这里是提交到什么地方的url
                data:{alphotoId:id,nowName:name},            // 这里把表单里面的数据放在这里传到后台
                dataType:"json",
                success:function(date){
                    if(date=="0"){
                        zeroModal.success('修改成功！');
                        setTimeout(function () {
                            window.location.reload();
                        },1000)
                    }else{
                        zeroModal.error('相册名已存在！');
                    }
                },
				/*  error:function(){
				 $("#msg").html("用户名或密码错误！");
				 }  */
            });
		}
    }
//删除弹框函数
function _confirm2(alphotoId) {
    zeroModal.confirm({
        content: '确定删除吗？',
        contentDetail: '删除后将不再显示',
        okFn: function() {
            $.ajax({
                type:"post",
                url:"photoController/deleteAlphoto",
                data:{alphotoId:alphotoId},            // 这里把表单里面的数据放在这里传到后台
                dataType:"json",
                success:function(flag){
                    if(flag=='0'){
                        zeroModal.success('该相册已删除!');
                        setTimeout(function () {
                            window.location.reload();
                        },1000)
                    }
                },
                error:function(){
                    zeroModal.error('相册删除失败!');
                }
            });
        },
        cancelFn: function() {

        }
    });
}
</script>
</head>
<body style="font-size: 16px;">
	<div class="wrap">
		<span id="user" style="color:#99CC00;">${user.userName}，欢迎来到[${user.familyName}]！</span>
		<button id="quit" onclick="quitFun()">退出</button>
		<div class="logo">
			<a href="index.jsp"><img src="images/logo.png" alt="" /></a>
		</div>
		<div class="nav">
			<ul>
				<li><a href="pageController/index">家庭主页</a></li>
				<li><a href="pageController/myFamily">我的家庭</a></li>
				<li><a href="pageController/dynamics?familyId=${user.familyId}">家庭动态</a></li>
				<li><a href="pageController/photo?userId=${user.id}"><span
						style="color: blue;">家庭相册</span></a></li>
			</ul>
		</div>
		<div class="clear"></div>
	</div>

	<div id="header">
		<div class="wrap">
			<div class="banner">
				<ul class="texts">
					<p style="font-size:21px; font-family: 华文行楷">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家，永远在我的记忆里，在我的意识里，在醒来梦去的眸子里，清晰如昨。 </p>
					<p style="font-size:21px; font-family: 华文行楷">&nbsp;&nbsp;&nbsp;&nbsp;家是温馨的港湾，容纳漂泊的灵魂；家是如伞的大树，遮挡酷夏的骄阳；</p>
					<p style="font-size:21px; font-family: 华文行楷">家是清凉的雨丝，拂去疲惫的征尘；家是永远的牵挂，珍藏幸福的存根。</p>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<!--header结束-->
	<div id="main">
		<div class="box">
			<div class="wrap" id="create">
				<ul>
					<c:forEach items="${alphotos}" var="alphoto">
						<li>
							<c:set var='auser' value='${alphoto.userName}'></c:set>
							<c:set var='user3' value='${user.userName}'></c:set>
							<div class='Newphoto'>
								<div id="cont${alphoto.id}" hidden style="position: absolute;" <c:if test="${auser==user3}">onmouseover="$('#cont${alphoto.id}').show()" onmouseleave="$('#cont${alphoto.id}').hide()" </c:if>>
									<button type="button" onclick="editAlphoto('${alphoto.id}')">编辑</button><br>
									<button type="button" onclick="_confirm2('${alphoto.id}')">删除</button>
								</div>
								<a href='pageController/myphoto?alphotoId=${alphoto.id}&alphotoName=${alphoto.name}'>
									<div class='con' <c:if test="${auser==user3}">onmouseover="$('#cont${alphoto.id}').show()" onmouseleave="$('#cont${alphoto.id}').hide()" </c:if>>
										<img src='images/file.jpg' />
									</div>
								</a>
								<span id="name${alphoto.id}">${alphoto.name}</span>&nbsp;&nbsp;
								<button id="save${alphoto.id}" hidden style="position: absolute;" onclick="saveName('${alphoto.id}')">保存</button></a>
							</div>
						</li>
					</c:forEach>

					<li>
						<div class='Newphoto'>
							<a id='creatrNew' href="javascript:" class='bounceIn'>
								<div class='con'>
									<img src='images/new.jpg' />
								</div>
							</a>
							<span>新建相册</span>
						</div>
					</li>
				</ul>

				<div id="dialogBg"></div>
				<div id="dialog" class="animated">
					<img class="dialogIco" width="50" height="50" src="images/ico.png"
						alt="" />
					<div class="dialogTop">
						<a href="javascript:" class="claseDialogBtn">关闭</a>
					</div>
					<form action="" method="post" id="editForm">
						<ul class="editInfos">
							<li><label><font color="#ff0000">* </font>请输入相册名称：</br>
								</br>
								<input type="text" id="ipt" name="ipt" required class="ipt" /></label></li>
							<li><font color="red"><span id='msg'></span></font></br>
							<input type="button" value="创建" class="submitBtn"
								onclick="createPhoto()" /></li>
						</ul>
					</form>
				</div>


			</div>
			<div class="clear"></div>
		</div>
	</div>
	<div class="foot">
		<div class="wrap">
			<div id="fbr">
				<p style="font-size:15px; font-family: 华文行楷">Copyright &copy; 家庭博客（2017）.</p>
				<div class="ft-nav">
					<ul>
				<li><a href="pageController/index">家庭主页</a></li>
				<li><a href="pageController/myFamily">我的家庭</a></li>
				<li><a href="pageController/dynamics?familyId=${user.familyId}">家庭动态</a></li>
				<li><a href="pageController/photo?userId=${user.id}"><span
						style="color: blue;">家庭相册</span></a></li>
			</ul>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>

</body>
</html>